<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" value="ajax get方式访问服务器" onclick="ajaxGet()"/><br/>
	<input type="button" value="ajax post方式访问服务器" onclick="ajaxPost()"/><br/>
	<input type="button" value="ajax方式访问服务器" onclick="ajax()"/><br/>
	
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function ajaxGet() {
			// $.get(url, [data], [callback], [type])
			$.get('${pageContext.request.contextPath}/ajax', // url：代表请求的服务器端地址
				   {'name' : '张三1', 'age' : 23},   // data：代表请求服务器端的数据
				   function(jsonObj) {  //callback：表示服务器端成功响应所触发的函数
					   console.log(jsonObj);
				   },
				   'json' // type：表示服务器端返回的数据类型
			);
		}
		
		function ajaxPost() {
			// $.post(url, [data], [callback], [type])
			$.post('${pageContext.request.contextPath}/ajax', // url：代表请求的服务器端地址
				   {'name' : '张三2', 'age' : 24},   // data：代表请求服务器端的数据
				   function(jsonObj) {  //callback：表示服务器端成功响应所触发的函数
					   console.log(jsonObj);
				   },
				   'json' // type：表示服务器端返回的数据类型
			);
		}
		
		function ajax() {
			// $.ajax( { option1:value1,option2:value2... } ); 
			$.ajax({
				url : '${pageContext.request.contextPath}/ajax', // 请求服务器端地址
				async : true,  // async：是否异步，默认是true代表异步。
				data :  {'name' : '王五', 'age' : 33},  //data：发送到服务器的参数，建议使用json格式 
				success : function(jsonObj) {  // 成功响应执行的函数，对应的类型是function类型
					 console.log(jsonObj);
				},
				dataType : 'json',    // 服务器端返回的数据类型，常用text和json
				type : 'GET'   // 请求方式，POST/GET
			});
		}
	</script>
</body>
</html>